<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        数学: <input type="text" v-model="math"><br>
        英语: <input type="text" v-model="enscore"><br>
        <!-- v-model 调用函数时,不要少了小括号 -->
        总得分: <input type="text" v-model="sum()"><br>
        <!-- 绑定计算属性时后面不加上小括号 -->
        总得分(方法): <input type="text" v-model="sumscore">
        总得分(计算属性): <input type="text" v-model="sumScore2">
        总得分(监听器): <input type="text" v-model="enscore3">


    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        //
        /*
         1.函数没有缓存,每次都会被调用
         2.计算属性有缓存,只有当计算属性体内的属性值被更改之后才会被调用,不然不会被调用
         3.函数只支持单向绑定
         4.计算属性默认只有getter函数,而而没有setter函数
        */
        var vm = new Vue({
            el: "#app",
            //数据
            data: {
                math: 80,
                enscore: 90,
                enscore3: 0

            },
            //方法
            methods: {
                sum: function () {
                    console.log("计算函数被调用")
                    //this 指向的就是 vm 实例, 减0 是为了字符串转为数字计算
                    return (this.math - 0) + (this.enscore - 0)
                }
            },
            //计算属性
            computed: {//计算属性有缓存,如果计算属性体内的属性值没有发生改变,则不会从新计算,只有发生改变才会计算
                sumscore: function () {
                    console.log("计算属性被调用")
                    return (this.math - 0) + (this.enscore - 0)

                },
                //指定 getter/setter 双向绑定
                sumScore2: {
                    //获取数据
                    get: function () {
                        console.info('sumScore2被调用')
                        return (this.math - 0) + (this.enscore - 0)
                    },
                    //设置数据
                    set: function (newValue) {
                        //value为更新后的值 // 被调用则更新了sumScore2，然后将数学和英语更新为平均分 
                        var avgScore = newValue / 2
                        this.math = avgScore
                        this.enscore = avgScore;
                    }
                }

            },
            //监听器
            watch: {
                math: function (newValue, oldValue) {
                    this.enscore3 = (newValue - 0) + (this.enscore - 0)
                }
            }
        })
        //监听器 第二种实现方式
        vm.$watch('enscore', function (newValue) {
            this.enscore3 = (newValue - 0) + (this.math - 0)
        })

        vm.$watch('enscore3', function (newValue) {
            var avg= newValue/2
            this.math=avg;
            this.enscore=avg;
            })
    </script>
</body>

</html>